<template>
   <div id="sheIndex">
        <mt-loadmore :top-method="loadTop"  @top-status-change="handleTopChange" ref="loadmore" :maxDistance='80'>
            <mt-button type="primary" size="small" @click.native="$router.push('/she/detail')">跳转</mt-button>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p style="width:2rem">123</p>
            <ul>
                <li v-for="(v,i) in list" :key="i">{{v}}</li>
            </ul>
            <div slot="top" class="mint-loadmore-top">
                <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
                <span v-show="topStatus === 'loading'">Loading...</span>
            </div>
        </mt-loadmore>
        <div ref="scroll" class="scrollFather">
            <div class="scroll"></div>
        </div>
        
   </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  data() {
    return {
      list: [],
      allLoaded: false,
      topPullText: "下拉刷新",
      topStatus: ""
    };
  },
  methods: {
    loadTop() {
      this.$refs.loadmore.onTopLoaded();
      this.list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    },
    handleTopChange(status) {
      console.log(status);
      this.topStatus = status;
    }
  },
  mounted() {
    var self = this;
    self.$nextTick(() => {
      var scroll = new BScroll(self.$refs.scroll, {
        probeType: 3,
        momentum: true,
        bounce: true
      });
      scroll.on("scroll", pos => {
        console.log(pos);
      });
    });
  }
};
</script>

<style scoped>
#she {
  height: 10rem;
}
.scrollFather {
  width: 100%;
  height: 20px;
}
.scroll {
  width: 100%;
  height: 800px;
  background: red;
}
</style>
